<template>
    <div>
        <Col span="3">
            <Button @click="changeType(1)">新闻分类</Button>
            <Tree :data="baseData" show-checkbox  @on-select-change="nodeNews"></Tree>
        </Col>
        <Col span="21">
          <Row>
              <Col span="12">
                  <Button type="primary" @click="addData" style="margin:5px;">添加新闻</Button>
                  <Button type="error"  @click="removeData" style="margin:5px;">删除选中</Button>
              </Col>
              <Col span="12">
                  <Input v-model="filter.title">
                      <Button slot="append" icon="ios-search" @click="search"></Button>
                  </Input>
              </Col>
          </Row>
          <Row>
              <Table :columns="columns1" :data="list" @on-selection-change="removeData"></Table>
                <Page :total="filter.total" show-elevator show-total size="small" show-sizer :page-size="1" @on-page-size-change="onPageSizeChange"  @on-change="changePage"></Page> 

              <Modal
                v-model="modal1"
                title="普通的Modal对话框标题"
                @on-ok="ok"
                @on-cancel="cancel">
                                                                            <!-- :rules="ruleValidate" -->
                <Form ref="formValidate" :model="formValidate"  :label-width="80">
                    <FormItem label="作者" prop="author">
                        <Input v-model="formValidate.author" placeholder="请输入姓名"></Input>
                    </FormItem>
                    <FormItem label="标题" prop="title">
                        <Input v-model="formValidate.title" placeholder="请输入标题"></Input>
                    </FormItem>
                    <FormItem label="内容" prop="content">
                        <Input v-model="formValidate.content" placeholder="请输入内容"></Input>
                    </FormItem>
                    <FormItem label="选择日期">
                        <Row>
                            <Col span="11">
                                <FormItem prop="date">
                                    <DatePicker type="date" placeholder="选择日期" v-model="formValidate.date"></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span="2" style="text-align: center">-</Col>
                            <Col span="11">
                                <FormItem prop="time">
                                    <TimePicker type="time" placeholder="选择时间" v-model="formValidate.time"></TimePicker>
                                </FormItem>
                            </Col>
                        </Row>
                    </FormItem>
                
                    <FormItem>
                        <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                        <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                    </FormItem>
                </Form>

            </Modal>
          </Row>
      </Col>
    </div>
    
</template>

<script>

  import Base from '../../common/Base'
    export default {
        mixins:[Base],
        data () {
            return {
                module:'news',
                baseData: [],
                value:'',
                parentId:'',
                value:'',
                formValidate:{
                    author:'',
                    title:'',
                    type:1,
                    content:'',
                    date:'',
                    time:'',
                    parentId:''
                },
                childrenData: {
                    title:'',
                    children: [],
                    parentId: '',
                    id: ''
                },
                columns1: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '作者',
                        key: 'author',
                    },
                    {
                        title: '标题',
                        key: 'title',
                    },
                    {
                        title: '内容',
                        key: 'content',
                    },
                    {
                        title: '日期',
                        key: 'date',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'success',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.$router.push({
                                                path:'/comment',
                                                query:{
                                                    routeParams:params.row._id
                                                }
                                            })
                                        }
                                    }
                                }, '查看评论'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.editData(params.row._id)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.removeData(params.row._id)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
            }
        },
        methods:{
            nodeNews(node){
                this.formValidate.parentId=node[0].id;
                //console.log(this.formValidate.parentId);
                this.parentId=node[0].id;
                var parentId=this.parentId
                console.log(parentId)
                this.$http({
                    method:'POST',
                    url:'http://localhost:3000/news/find',
                    data:{query:{parentId:parentId}},
                }).then(res=>{
                    //console.log(res.data)
                    this.list = res.data;

                })
            },
             handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        var id=this.formValidate._id;
                        console.log(this.formValidate);
                        if(id){
                            console.log(1)
                            this.$http({
                            method:'POST',
                            url:'http://localhost:3000/news/data/'+id,
                            data:this.formValidate
                            }).then(res=>{
                                //console.log('......')
                            })
                        }
                         this.$http({
                            method:'POST',
                            url:'http://localhost:3000/news/data',
                            data:this.formValidate
                        }).then(res=>{

                        })
                        this.$Message.success('提交成功!');
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            ok () {
                this.$Message.info('点击了确定');
                this.getData();
            },
            cancel () {
                this.$Message.info('点击了取消');
            },
            getTree(type){
                this.$http({
                    method:'POST',                    
                    url:'http://localhost:3000/cate/list/'+type,
                }).then(res=>{
                    //console.log(res.data);
                    this.baseData=res.data;
                })
            }



        },
        created(){
            this.getTree(1);
        }
    }
</script>

<style scoped>
    .active{
        background:lightskyblue;
    }
</style>

